<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
    <title>68</title>
</head>
<body>
    <div id="app">
        <lists></lists>
    </div>
    <!--构建模板-->
    <script type="text/x-template" id="lists">
        <div>
            <table border="1px" width="auto">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                </tr>
                <tr v-for="v in goods">
                    <td>{{v.id}}</td>
                    <td>{{v.title}}</td>
                    <td>{{v.price}}</td>
                </tr>
            </table>
            <h1>总价：{{totalPrice}}</h1>
        </div>

    </script>

</body>
<script>
    let store=new Vuex.Store({
        state:{
            totalPrice:100,
            goods:[
                {id:1,title:'iphone7',price:399},
                {id:2,title:'iphone8',price:1888}
            ]

        }
    });
    let lists={
        template:'#lists',
        computed:{
            totalPrice(){
                return this.$store.state.totalPrice;
            },
            goods(){
                return this.$store.state.goods;
            }
        }
    };
        var app=new Vue({
           el:'#app',
            store,
            components:{
               lists
            }

        });


</script>
</html>